import React from 'react'
import '../assets/css/progressbar.css'
class Progressbar extends React.Component {
    constructor() {
        super()
        this.point = React.createRef()
    }
   
    render() {
        let length = 15
        let totalmin = 0
        let totals = 0
        let nowmin = 0
        let nows = 0
        try {
            // length = this.props.time / 4 / this.props.playmusiclist[this.props.listmusicindex].dt * 80 *100
            length = 70 / this.props.playmusiclist[this.props.listmusicindex].dt * this.props.time * 250 + 15
            totalmin = Math.floor(this.props.playmusiclist[this.props.listmusicindex].dt / 1000 / 60)
            totals = Math.ceil(this.props.playmusiclist[this.props.listmusicindex].dt / 1000 - totalmin * 60)
            nowmin = Math.floor(this.props.time / 4 / 60)
            nows = Math.floor(this.props.time / 4 - nowmin * 60)

        } catch (e) {
            // console.log(e)
        }
        // console.log(length)
        if (length == 0) {
            length = 15
        }
        let style = { left: length + '%' }
        return (
            <div>
                <div className='progressbar_container'></div>
                <div className='point' ref={this.point} style={style} ></div>
                <div className='nowtime'>{nowmin <= 9 ? '0' + nowmin : nowmin}:{nows <= 9 ? '0' + nows : nows}</div>
                <div className='totaltime'>{totalmin <= 9 ? '0' + totalmin : totalmin}:{totals <= 9 ? '0' + totals : totals}</div>
            </div>
        )
    }
}
export default Progressbar;